<template>
  <view class="container">
    <view class="settings-group">
      <view class="group-title">通知设置</view>
      <u-cell-group>
        <u-cell title="待办到期提醒">
          <u-switch v-model="settings.todoReminder" slot="right-icon"></u-switch>
        </u-cell>
        <u-cell title="每日任务统计">
          <u-switch v-model="settings.dailySummary" slot="right-icon"></u-switch>
        </u-cell>
        <u-cell title="进度更新提醒">
          <u-switch v-model="settings.progressUpdate" slot="right-icon"></u-switch>
        </u-cell>
      </u-cell-group>
    </view>
    
    <view class="settings-group">
      <view class="group-title">显示设置</view>
      <u-cell-group>
        <u-cell title="深色模式" @click="toggleDarkMode">
          <view slot="right-icon">
            <text class="mode-text">{{ settings.darkMode ? '开启' : '关闭' }}</text>
            <u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
          </view>
        </u-cell>
        <u-cell title="字体大小" @click="showFontSizePicker = true">
          <view slot="right-icon">
            <text class="mode-text">{{ fontSizeMap[settings.fontSize] }}</text>
            <u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
          </view>
        </u-cell>
      </u-cell-group>
    </view>
    
    <view class="settings-group">
      <view class="group-title">数据管理</view>
      <u-cell-group>
        <u-cell title="清除缓存" @click="clearCache">
          <view slot="right-icon">
            <text class="cache-size">{{ cacheSize }}</text>
            <u-icon name="arrow-right" color="#c8c9cc" size="28"></u-icon>
          </view>
        </u-cell>
        <u-cell title="数据备份" isLink @click="backupData"></u-cell>
        <u-cell title="恢复数据" isLink @click="restoreData"></u-cell>
      </u-cell-group>
    </view>
    
    <view class="settings-group">
      <view class="group-title">其他设置</view>
      <u-cell-group>
        <u-cell title="检查更新" isLink @click="checkUpdate"></u-cell>
        <u-cell title="关于我们" isLink @click="navTo('/pages/user/about')"></u-cell>
        <u-cell title="用户协议" isLink @click="navTo('/pages/user/agreement?type=user')"></u-cell>
        <u-cell title="隐私政策" isLink @click="navTo('/pages/user/agreement?type=privacy')"></u-cell>
      </u-cell-group>
    </view>
    
    <!-- 字体大小选择器 -->
    <u-picker
      :show="showFontSizePicker"
      :columns="[fontSizeOptions]"
      @confirm="onFontSizeConfirm"
      @cancel="showFontSizePicker = false"
    ></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      settings: {
        todoReminder: true,
        dailySummary: true,
        progressUpdate: true,
        darkMode: false,
        fontSize: 'medium'
      },
      cacheSize: '0KB',
      showFontSizePicker: false,
      fontSizeMap: {
        small: '小',
        medium: '中',
        large: '大',
        xlarge: '超大'
      },
      fontSizeOptions: [
        { value: 'small', label: '小' },
        { value: 'medium', label: '中' },
        { value: 'large', label: '大' },
        { value: 'xlarge', label: '超大' }
      ]
    }
  },
  onLoad() {
    this.loadSettings()
    this.getCacheSize()
  },
  methods: {
    // 加载设置
    loadSettings() {
      try {
        const settings = uni.getStorageSync('settings')
        if (settings) {
          this.settings = JSON.parse(settings)
        }
      } catch (error) {
        console.error('加载设置失败', error)
      }
    },
    
    // 保存设置
    saveSettings() {
      try {
        uni.setStorageSync('settings', JSON.stringify(this.settings))
        uni.showToast({
          title: '设置已保存',
          icon: 'success'
        })
      } catch (error) {
        console.error('保存设置失败', error)
        uni.showToast({
          title: '保存设置失败',
          icon: 'none'
        })
      }
    },
    
    // 切换深色模式
    toggleDarkMode() {
      this.settings.darkMode = !this.settings.darkMode
      this.saveSettings()
      
      // 应用深色模式
      if (this.settings.darkMode) {
        // 实现深色模式的逻辑
        uni.setTabBarStyle({
          backgroundColor: '#222',
          color: '#8F8F8F',
          selectedColor: '#2979ff',
          borderStyle: 'black'
        })
      } else {
        // 恢复默认模式
        uni.setTabBarStyle({
          backgroundColor: '#FFFFFF',
          color: '#909399',
          selectedColor: '#2979ff',
          borderStyle: 'black'
        })
      }
    },
    
    // 字体大小确认
    onFontSizeConfirm(e) {
      this.showFontSizePicker = false
      const selectedSize = e.value[0]
      this.settings.fontSize = selectedSize.value
      this.saveSettings()
      
      // 应用字体大小
      this.applyFontSize(selectedSize.value)
    },
    
    // 应用字体大小
    applyFontSize(size) {
      // 实际应用字体大小的逻辑
      const sizeMap = {
        small: '24rpx',
        medium: '28rpx',
        large: '32rpx',
        xlarge: '36rpx'
      }
      
      // 这里可以通过动态样式或其他方式应用字体大小
      console.log('应用字体大小:', sizeMap[size])
    },
    
    // 获取缓存大小
    getCacheSize() {
      uni.getStorageInfo({
        success: (res) => {
          const size = res.currentSize
          if (size < 1024) {
            this.cacheSize = size + 'KB'
          } else {
            this.cacheSize = (size / 1024).toFixed(2) + 'MB'
          }
        },
        fail: () => {
          this.cacheSize = '获取失败'
        }
      })
    },
    
    // 清除缓存
    clearCache() {
      uni.showModal({
        title: '提示',
        content: '确定要清除缓存吗？',
        success: (res) => {
          if (res.confirm) {
            // 保留必要的数据，如登录状态和用户设置
            const token = uni.getStorageSync('token')
            const userInfo = uni.getStorageSync('userInfo')
            const settings = uni.getStorageSync('settings')
            
            // 清除所有存储
            uni.clearStorageSync()
            
            // 恢复必要的数据
            if (token) uni.setStorageSync('token', token)
            if (userInfo) uni.setStorageSync('userInfo', userInfo)
            if (settings) uni.setStorageSync('settings', settings)
            
            // 更新缓存大小显示
            this.getCacheSize()
            
            uni.showToast({
              title: '缓存已清除',
              icon: 'success'
            })
          }
        }
      })
    },
    
    // 数据备份
    backupData() {
      uni.showLoading({
        title: '正在备份...',
        mask: true
      })
      
      try {
        // 获取需要备份的数据
        const backupData = {
          settings: uni.getStorageSync('settings'),
          // 其他需要备份的数据
        }
        
        // 在实际应用中，这里应该调用后端接口进行备份
        setTimeout(() => {
          uni.hideLoading()
          uni.showToast({
            title: '备份成功',
            icon: 'success'
          })
        }, 1000)
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '备份失败',
          icon: 'none'
        })
      }
    },
    
    // 恢复数据
    restoreData() {
      uni.showModal({
        title: '提示',
        content: '恢复数据将覆盖当前数据，确定继续吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '正在恢复...',
              mask: true
            })
            
            // 在实际应用中，这里应该调用后端接口进行数据恢复
            setTimeout(() => {
              uni.hideLoading()
              uni.showToast({
                title: '恢复成功',
                icon: 'success'
              })
              
              // 重新加载设置
              this.loadSettings()
            }, 1000)
          }
        }
      })
    },
    
    // 检查更新
    checkUpdate() {
      uni.showLoading({
        title: '检查中...'
      })
      
      // 在实际应用中，这里应该调用后端接口检查更新
      setTimeout(() => {
        uni.hideLoading()
        uni.showModal({
          title: '检查更新',
          content: '当前已是最新版本',
          showCancel: false
        })
      }, 1000)
    },
    
    // 页面导航
    navTo(url) {
      uni.navigateTo({ url })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 40rpx;
}

.settings-group {
  margin-bottom: 20rpx;
}

.group-title {
  padding: 20rpx 30rpx;
  font-size: 28rpx;
  font-weight: 500;
  color: #666;
}

.mode-text, .cache-size {
  font-size: 28rpx;
  color: #999;
  margin-right: 10rpx;
}
</style> 